<template>
  <div>
    <Row type="flex" style="margin: 0 10px">
      <Col span="8" order="1">
        <span>职场：</span>
        <RadioGroup v-model="address">
          <Radio label="所有" value="所有"></Radio>
          <Radio label="深圳" value="深圳"></Radio>
          <Radio label="上海" value="上海"></Radio>
          <Radio label="杭州" value="杭州"></Radio>
          <Radio label="武汉" value="武汉"></Radio>
        </RadioGroup>
      </Col>
      <Col span="14" order="1">
        <span>俱乐部：</span>
        <RadioGroup v-model="club">
          <Radio label="所有" value="所有"></Radio>
          <Radio label="羽毛球" value="羽毛球"></Radio>
          <Radio label="篮球" value="篮球"></Radio>
          <Radio label="足球" value="足球"></Radio>
          <Radio label="乒乓球" value="乒乓球"></Radio>
          <Radio label="瑜伽" value="瑜伽"></Radio>
          <Radio label="游泳" value="游泳"></Radio>
          <Radio label="户外活动" value="户外活动"></Radio>
        </RadioGroup>
      </Col>
      <Col span="2" order="1">
        <el-row>
          <el-button size="small" type="primary" @click="addOrder">新增</el-button>
        </el-row>
      </Col>
    </Row>
    <Row type="flex">
      <Col span="6" order="1" v-for="(item, index) in activity" :key="index" style="padding: 10px">
        <Card>
          <Row type="flex" justify="center" align="middle" class="">
            <div class="count-to-con card-member">
              <img :src="item.activityImg" width="100%" alt="">
              <p class="card-name">{{item.memberName}}</p>
            </div>
          </Row>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalVisible" :title="'添加俱乐部成员'" @on-ok="ok" @on-cancel="cancel">
      <div style="margin-bottom: 10px;">
        <el-input placeholder="请输入俱乐部名称">
          <template slot="prepend">俱乐部名称</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="请输入名称">
          <template slot="prepend">名字</template>
        </el-input>
      </div>
      <div>
        <Upload action="//jsonplaceholder.typicode.com/posts/">
          <Button icon="ios-cloud-upload-outline">上传照片</Button>
        </Upload>
      </div>
    </Modal>
  </div>
</template>

<script>

  export default {
    name: 'member_page',
    components: {},
    data() {
      return {
        newAddOrder: {},
        contentObj: {},
        modalVisible: false,
        columns: [
          {title: '编号', key: 'clubId', sortable: true},
          {title: '俱乐部名称', key: 'clubName'},
          {title: '俱乐部人数', key: 'clubNum', editable: true},
          {title: '职场', key: 'clubAddress'},
          {title: '负责人', key: 'clubMaster'},
          {title: '口号', key: 'iconImg'}
        ],
        tableData: [
          {
            'clubId': '101101',
            'clubName': '深圳羽毛球俱乐部',
            'clubNum': '55',
            'clubAddress': '深圳',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubMaster': '吴彦祖',
            'iconImg': '羽你相约，羽爱同行',
            'clubAdd': true
          },
          {
            'clubId': '101102',
            'clubName': '深圳篮球俱乐部',
            'clubNum': '61',
            'clubImg': require('@/assets/images/icon-club-2.png'),
            'clubAddress': '深圳',
            'clubMaster': '黎明',
            'iconImg': '团结拼搏，超越自我',
            'clubAdd': true
          },
          {
            'clubId': '101103',
            'clubName': '深圳乒乓球俱乐部',
            'clubNum': '32',
            'clubImg': require('@/imgs/icon-club-9.png'),
            'clubAddress': '深圳',
            'clubMaster': '梁朝伟',
            'iconImg': '乒无不克，乓无不胜'
          }, {
            'clubId': '101104',
            'clubName': '深圳游泳俱乐部',
            'clubNum': '28',
            'clubImg': require('@/imgs/icon-club-4.png'),
            'clubAddress': '深圳',
            'clubMaster': '孙杨',
            'iconImg': '齐心协力，谁与争锋'
          }, {
            'clubId': '101105',
            'clubName': '深圳足球俱乐部',
            'clubNum': '36',
            'clubImg': require('@/imgs/icon-club-5.png'),
            'clubAddress': '深圳',
            'clubMaster': '李华',
            'iconImg': ''
          }, {
            'clubId': '106',
            'clubName': '深圳瑜伽俱乐部',
            'clubNum': '32',
            'clubImg': require('@/imgs/icon-club-6.png'),
            'clubAddress': '深圳',
            'clubMaster': 'hhhh',
            'iconImg': ''
          }, {
            'clubId': '101107',
            'clubName': '深圳户外活动俱乐部',
            'clubNum': '31',
            'clubImg': require('@/imgs/icon-club-7.png'),
            'clubAddress': '深圳',
            'clubMaster': '薛之谦',
            'iconImg': ''
          }, {
            'clubId': '101108',
            'clubName': '深圳舞蹈俱乐部',
            'clubNum': '31',
            'clubImg': require('@/imgs/icon-club-8.png'),
            'clubAddress': '深圳',
            'clubMaster': '薛之谦',
            'iconImg': '舞动青春，快乐人生'
          },

          {
            'clubId': '102101',
            'clubName': '上海羽毛球俱乐部',
            'clubNum': '55',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海吴彦祖',
            'iconImg': '羽你相约，羽爱同行'
          },
          {
            'clubId': '102102',
            'clubName': '上海篮球俱乐部',
            'clubNum': '61',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海黎明',
            'iconImg': '团结拼搏，超越自我'
          },
          {
            'clubId': '102103',
            'clubName': '上海乒乓球俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海梁朝伟',
            'iconImg': '乒无不克，乓无不胜'
          }, {
            'clubId': '102104',
            'clubName': '上海游泳俱乐部',
            'clubNum': '28',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海孙杨',
            'iconImg': '齐心协力，谁与争锋'
          }, {
            'clubId': '102105',
            'clubName': '上海足球俱乐部',
            'clubNum': '36',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海李华',
            'iconImg': ''
          }, {
            'clubId': '102106',
            'clubName': '上海瑜伽俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海hhhh',
            'iconImg': '瑜悦身心，伽倍美丽'
          }, {
            'clubId': '102107',
            'clubName': '上海户外活动俱乐部',
            'clubNum': '31',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '上海',
            'clubMaster': '上海薛之谦',
            'iconImg': ''
          }, {
            'clubId': '103101',
            'clubName': '杭州羽毛球俱乐部',
            'clubNum': '55',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州吴彦祖',
            'iconImg': '羽你相约，羽爱同行'
          },
          {
            'clubId': '103102',
            'clubName': '杭州篮球俱乐部',
            'clubNum': '61',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州黎明',
            'iconImg': '团结拼搏，超越自我'
          },
          {
            'clubId': '103103',
            'clubName': '杭州乒乓球俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州梁朝伟',
            'iconImg': '乒无不克，乓无不胜'
          }, {
            'clubId': '103104',
            'clubName': '杭州游泳俱乐部',
            'clubNum': '28',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州孙杨',
            'iconImg': '齐心协力，谁与争锋'
          }, {
            'clubId': '103105',
            'clubName': '杭州足球俱乐部',
            'clubNum': '36',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州李华',
            'iconImg': ''
          }, {
            'clubId': '103106',
            'clubName': '杭州瑜伽俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州hhhh',
            'iconImg': '瑜悦身心，伽倍美丽'
          }, {
            'clubId': '103107',
            'clubName': '杭州户外活动俱乐部',
            'clubNum': '31',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '杭州',
            'clubMaster': '杭州薛之谦',
            'iconImg': ''
          }, {
            'clubId': '104101',
            'clubName': '武汉羽毛球俱乐部',
            'clubNum': '55',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉吴彦祖',
            'iconImg': '羽你相约，羽爱同行'
          },
          {
            'clubId': '104102',
            'clubName': '武汉篮球俱乐部',
            'clubNum': '61',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉黎明',
            'iconImg': '团结拼搏，超越自我'
          },
          {
            'clubId': '104103',
            'clubName': '武汉乒乓球俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉梁朝伟',
            'iconImg': '乒无不克，乓无不胜'
          }, {
            'clubId': '104104',
            'clubName': '武汉游泳俱乐部',
            'clubNum': '28',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉孙杨',
            'iconImg': '齐心协力，谁与争锋'
          }, {
            'clubId': '104105',
            'clubName': '武汉足球俱乐部',
            'clubNum': '36',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉李华',
            'iconImg': ''
          }, {
            'clubId': '104106',
            'clubName': '武汉瑜伽俱乐部',
            'clubNum': '32',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉hhhh',
            'iconImg': '瑜悦身心，伽倍美丽'
          }, {
            'clubId': '104107',
            'clubName': '武汉户外活动俱乐部',
            'clubNum': '31',
            'clubImg': require('@/assets/images/icon-club-3.png'),
            'clubAddress': '武汉',
            'clubMaster': '武汉薛之谦',
            'iconImg': ''
          }
        ],
        club: '羽毛球',
        address: '武汉',
        activity: [
          {
            'memberName': '陈然',
            'activityImg': require('@/imgs/member/m_cr.jpg'),
            'activityAddress': '武汉·奥林匹克',
            'activityStatus': '进行中',
          },
          {
            'memberName': '兰天皓',
            'activityImg': require('@/imgs/member/m_lth.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '陈小敏',
            'activityImg': require('@/imgs/member/m_cxm.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '王潇',
            'activityImg': require('@/imgs/member/m_wx.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '叶子汉',
            'activityImg': require('@/imgs/member/m_yzh.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '彭于晏',
            'activityImg': require('@/imgs/member/m_pyy.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '潇',
            'activityImg': require('@/imgs/member/m_wx2.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '黎明',
            'activityImg': require('@/imgs/member/m_lm.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '梁朝伟',
            'activityImg': require('@/imgs/member/m_lcw.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '小敏',
            'activityImg': require('@/imgs/member/m_cxm2.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '龚雷大帅哥',
            'activityImg': require('@/imgs/member/m_hg.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          },
          {
            'memberName': '易烊千玺',
            'activityImg': require('@/imgs/member/m_yyqx.png'),
            'activityAddress': '北京·水立方',
            'activityStatus': '计划中',
          }
        ],
        memberName: ['武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛', '武汉奥林匹克羽毛球决赛'],
        club_detail: '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。'
      }
    },
    methods: {
      handleDelete(params) {

      },
      exportExcel() {
        this.$refs.tables.exportCsv({
          filename: `table-${(new Date()).valueOf()}.csv`
        })
      },
      addOrder() {
        this.modalVisible = true
      },
      ok() {
        this.tableData.push(this.newAddOrder)
      },
      cancel() {

      }
    },
    mounted() {
      // getTableData().then(res => {
      //   this.tableData = res.data
      // })
    }
  }
</script>

<style scoped>
  .card-member {
    position: relative;
  }
  .card-name {
    position: absolute;
    width: 100%;
    height: 40px;
    background: #000000;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
</style>
